<template>
    <view class="shop">
        <view v-for="shop in shopList" :key="shop.id" class="shop-item">
            <image :src="shop.imgUrl"/>
            <view class="shop-right">
                <view class="shop-one">{{ shop.name }}</view>
                <view class="shop-two">
                    月售：{{ shop.sales }} &nbsp;
                    起送：{{ shop.expressLimit }} &nbsp;
                    基础运费：{{ shop.expressPrice }}
                </view>
                <view class="shop-three">{{shop.slogan}}</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            shopList: []
        }
    },
    onLoad() {
        this.firstshop()
    },
    methods: {
        firstshop(){
            uni.request({
                url:"http://localhost:3000/data",
                success:(res)=>{
                    this.shopList=res.data
                }
            })              
        }
    }
}
</script>

<style>
.shop{
    padding: 20px;
    margin: 20px;
    background-color: rgb(252, 250, 247);
}
.shop .shop-item{
        height: 90px;
        display: flex;
        border-bottom: 1px solid #e9e7e7;
        padding: 15px 0;
    }
    .shop .shop-item image {
        width: 60px; /* 调整图片大小 */
        height: 60px;
        margin-right: 14px;
    }
    .shop .shop-item .shop-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .shop .shop-item .shop-one{
        font-size: 19px;
    }
    .shop .shop-item .shop-three{
        color: red;
    }
</style>